const width_threshold = 480;

function drawLineChart() {
    if ($("#lineChart").length) {
        ctxLine = document.getElementById("lineChart").getContext("2d");
        optionsLine = {
            scales: {
                yAxes: [
                    {
                        scaleLabel: {
                            display: true,
                            labelString: ""
                        }
                    }
                ]
            }
        };

        // Set aspect ratio based on window width
        optionsLine.maintainAspectRatio =
            $(window).width() < width_threshold ? false : true;
        $.ajax({
            url: '/cms/index/interface/',
            type: 'get',
            data: {
                'action': 'line',
                'start': $('input[name="start"]').val(),
                'end': $('input[name="end"]').val(),
                'csrf_token': $('#csrf').attr('content')
            },
            success: (data) => {
                if (data.code === 200) {
                    rtn_data = data.data
                    configLine = {
                        type: "line",
                        data: {
                            labels: rtn_data.xdata,
                            datasets: [
                                {
                                    label: "新用户",
                                    data: rtn_data.user,
                                    fill: false,
                                    borderColor: "rgb(75, 192, 192, 1)",
                                    cubicInterpolationMode: "monotone",
                                    pointRadius: 3,

                                },
                                {
                                    label: "总曝光数",
                                    data: rtn_data.share,
                                    fill: false,
                                    borderColor: "rgba(255, 99, 132, 1)",
                                    cubicInterpolationMode: "monotone",
                                    pointRadius: 3
                                },
                                {
                                    label: "总发送数",
                                    data: rtn_data.send,
                                    fill: false,
                                    borderColor: "rgba(153, 102, 255, 1)",
                                    cubicInterpolationMode: "monotone",
                                    pointRadius: 3
                                },
                                {
                                    label: "新增短信数",
                                    data: rtn_data.add,
                                    fill: false,
                                    borderColor: "rgba(255, 255, 0, 1)",
                                    cubicInterpolationMode: "send",
                                    pointRadius: 3,
                                }

                            ]
                        },
                        options: optionsLine
                    };

                    lineChart = new Chart(ctxLine, configLine);
                } else {

                }

            },
            error: (error) => {

            }
        });

    }
}

function drawBarChart() {
    if ($("#barChart").length) {
        ctxBar = document.getElementById("barChart").getContext("2d");

            optionsBar = {
            responsive: true,
            scales: {
                yAxes: [
                    {
                        barPercentage: 0.2,
                        ticks: {
                            beginAtZero: true
                        },
                        scaleLabel: {
                            display: true,
                            labelString: "Hits"
                        }
                    }
                ]
            }
        };

        optionsBar.maintainAspectRatio =
            $(window).width() < width_threshold ? false : true;

        /**
         * COLOR CODES
         * Red: #F7604D
         * Aqua: #4ED6B8
         * Green: #A8D582
         * Yellow: #D7D768
         * Purple: #9D66CC
         * Orange: #DB9C3F
         * Blue: #3889FC
         */
        $.ajax({
            url: '/cms/index/interface',
            type: 'get',
            data: {},

            success: (data) => {
                let rtn_data = null;
                if (data.code === 200) {
                    rtn_data = data.data;

                } else {
                    rtn_data = {
                        'user_number': 0,
                        'share_nubmer': 0,
                        'view_number': 0,
                        'total_user_number': 0
                    }
                }
                configBar = {
                    type: "horizontalBar",
                    data: {
                        datasets: [
                            {
                                label: "新注册用户",
                                data: [rtn_data.user_number],
                                backgroundColor: [
                                    "#F7604D",
                                ],

                                borderWidth: 0,

                            },
                            {
                                label: "访问次数",
                                data: [ rtn_data.view_number],
                                backgroundColor: [
                                    "#4ED6B8",
                                ],
                                borderWidth: 0
                            },
                            {
                                label: "曝光次数",
                                data: [rtn_data.share_nubmer],
                                backgroundColor: [
                                    "#A8D582",
                                ],
                                borderWidth: 0
                            },
                            {
                                label: "累计注册",
                                data: [ rtn_data.total_user_number],
                                backgroundColor: [
                                    "#D7D768"
                                ],
                                borderWidth: 0
                            }
                        ]
                    },
                    options: optionsBar
                };

                barChart = new Chart(ctxBar, configBar);
            },
            error: (error) => {

            }
        });

    }
}


function updateLineChart() {
    if (lineChart) {
        lineChart.options = optionsLine;
        lineChart.update();
    }
}

function updateBarChart() {
    if (barChart) {
        barChart.options = optionsBar;
        barChart.update();
    }
}
